<template>
  <div class="home">
    <van-search
        v-model="data.value"
        shape="round"
        placeholder="请输入需要搜索的歌曲名"
        clearable
        @focus="data.onFocus=true ; data.list = [] ; data.finished = false"
        @keydown.enter="search()"
    />
    <van-list
        v-if=" data.onFocus"
        v-model:loading="data.loading"
        :finished="data.finished"
        finished-text="没有更多了"
    >
      <van-cell v-for="item in data.list"  :key="item" :title="item.keyword" @click="suggest(item.keyword)" />
    </van-list>
    <van-list
        style="margin-bottom:50px"
        v-if="data.show"
        v-model:loading="data.loading1"
        :finished="data.finished1"
        finished-text="没有更多了">
      <van-cell v-for="item in data.list1"  :key="item" :title="item.keyword" @click="play(item)" >
        <div class="content">
          <div class="n">{{item.name}}</div>
          <div class="s1">{{item.album.name}}</div>
          <div class="s">
            <span v-for="s in item.artists">
              {{s.name}}{{s.name === item.artists[item.artists.length-1].name ? '' : '/'}}
            </span>
          </div>
        </div>
        <div class="play">
          <span class="icon"  v-show="!item.isPlaying ">
           <svg t="1635790675413"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2430" width="200" height="200"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333c-258.133 0-469.333-211.2-469.333-469.333S253.867 42.667 512 42.667 981.333 253.867 981.333 512 770.133 981.333 512 981.333z" p-id="2431" fill="#aaaaaa"></path><path d="M672 441.6L501.333 328.533c-57.6-38.4-106.666-12.8-106.666 57.6v256c0 70.4 46.933 96 106.666 57.6L672 586.667C729.6 544 729.6 480 672 441.6z" p-id="2432" data-spm-anchor-id="a313x.7781069.0.i2" fill="#aaaaaa" class="selected"></path></svg>
          </span>
          <div class="donghua" :class="{pause:!item.isPlaying}" v-show="item.isPlaying">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

      </van-cell>
    </van-list>

  </div>
</template>

<script setup>
import {reactive, watch, inject} from 'vue'
import axios from 'axios'
import store from '@/store'
import {showToast} from 'vant'
import {useStore} from 'vuex'

const plays = inject('plays')
const pauses = inject('pauses')

const store1 = useStore()

const data = reactive({
  value: '',
  list: [],
  list1: [],
  loading1:false,
  loading: false,
  show: false,
  playSong:false,
  isPlaying:false,
  finished1: false,
  finished: false,
  onFocus: false,
  success:true,
  song:{},
});
// @ is an alias to /src
watch(()=>data.value,()=>{
  data.loading = true;
  data.finished = false;
  data.list = [];
  if(data.value!==''){


    setTimeout(()=>{



      axios.get(store.state.hostUrl + store.state.suggest + data.value.trim()).then(res => {
        data.finished = true
        data.loading = false;
        data.list = res.data.result.allMatch
      })
    }, 800)

  }
})
const play = (item)=>{
  var audio = document.getElementById('music1');
  if (!item.isPlaying) {
    data.list1.forEach(o => {
      o.isPlaying = false
    })
    axios.get(store.state.hostUrl + store.state.isUse + item.id).then(res => {

      data.success = true
      data.isPlaying = true
      axios.get(store.state.hostUrl + store.state.songUrl + item.id).then(res => {

        data.song = res.data.songs[0]
        data.song.songUrl = `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`
        store1.state.song = data.song
        store1.state.PlaySong = true
        data.song.isPlaying = true
        item.isPlaying = true
        data.playSong = true
        // pm(data.song.songUrl)
        audio.play()
      })
      // data.song = {...item,songUrl:`https://music.163.com/song/media/outer/url?id=${item.id}.mp3`}
    }).catch(err => {
      data.success = false
      showToast('该歌曲暂时没有版权')
    })
  }else {
    audio.pause()
    data.isPlaying = false
    item.isPlaying = false
    data.song.isPlaying = false
  }
  // data.playSong = true

}
// const pm = (url)=>{
//   data.audio = new Audio(url)
//   data.audio.src = url
//   data.audio.play()
//   // return audio
// }
const suggest =(key)=>{
  data.value = key
  search()
}
const search = () => {
  data.list1 = []
  data.finished1 = false;
  data.show = true
  data.onFocus = false
  if (data.value){

  data.loading = true;
  axios.get(store.state.hostUrl + store.state.music + data.value.trim()).then(res => {
    data.list1 = res.data.result.songs;
    data.list1.forEach(item=>{
      item.isPlaying = false
      data.value =''
    })

    data.loading = false;
    data.finished1 = true
  })
  }
}

</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
}
@keyframes loading {
  from{
    transform:scaleY(0.2) ;
  }
  to{
    transform:scaleY(1) ;
  }
}

.van-search{
  margin: 0 auto;
  width: 80vw;
  .van-field__body{
    flex: 1;
  }
}
.van-list{
  width: 80vw;
  margin: 0 auto;
  text-align: left;
  text-indent:2vw;

  .van-cell:not(:last-child):hover {
    cursor: pointer;
    background-color: #f2f2f2;
  }
}
.van-cell__value{
  display: flex;
  align-items: center;

}
.content{
  display: flex;
  flex-direction: column;
  width: 60vw;
  //display: inline-block;
  text-align: left;
  text-indent: 2vw;
  .n{
    font-size: 1.5rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .s1{
    font-size: 0.9rem;
    color: #aaaaaa;
  //  不换行自动缩略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .s{
      font-size: 1.1rem;
      color: #aaaaaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
}
.play{
  display: flex;
  width: 40px;
  height: 40px;
  //margin-right: 10px;
  //background: red;
  align-items: center;
  .icon{
    width: 25px;
    height: 25px;
    svg{
      width: 100%;
      height: auto;
    }
  }
  .donghua{
    display: flex;
    margin-left: 2px;
    height: 45%;
    width: 45%;
    justify-content: space-between;
    align-items: center;
    span{
      animation-play-state: running;
      animation: loading 0.9s linear infinite alternate;
      width: 20%;
      height: 100%;
      display: block;
      background: red;
      //animation-play-state: paused;
      transform-origin: bottom;
      &:nth-child(1) {
        animation-delay: -0.6s;
      }

      &:nth-child(2) {
        animation-delay: -0.3s;
      }
    }
    &.pause {
      span{
        animation-play-state: paused;

      }
    }
  }
}
</style>
